<script setup>
import { useEcharts } from '../composables/useEcharts';
import { onMounted, ref } from 'vue';
import axios from 'axios';
const dataThree = ref({})
const threeChart = ref(null)

const getData = async () => {
  const res = await axios.get('/three/data')
  dataThree.value = res.data.chartThree.chartData

}
onMounted(() => {
  getData().then(() => {
    const echartsInstance = useEcharts(threeChart.value)
    echartsInstance.setOption({
      legend:{
        top:"bottom"
      },
      tooltip:{
        show:true
      },
      series:[
        {
          type:"pie",
          data:dataThree.value,
          radius:[10,100], // 饼图圆角
          center:["50%","45%"], // 饼图位置
          roseType:"area",
          itemStyle:{
            borderRadius:10
          }
        }
      ]
    })
  })

})
</script>

<template>
  <div>
    <h2>库存统计</h2>
    <div class="chart" ref="threeChart"></div>
  </div>
</template>

<style lang="less" scoped>
.chart{
  height: 4.5rem;
}
h2 {
  height: .6rem;
  color: #fff;
  line-height: .6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>
